import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class GroupConfirmController extends GetxController with WidgetsBindingObserver {
  RxDouble bottom = 0.0.obs;

  late ScrollController scrollController;

  void gotoBottom() {
    scrollController.jumpTo(scrollController.position.maxScrollExtent);
  }

  @override
  void onInit() {
    scrollController = ScrollController();
    WidgetsBinding.instance.addObserver(this);
    super.onInit();
  }

  @override
  void onClose() {
    scrollController.dispose();
    WidgetsBinding.instance.removeObserver(this);
    super.onClose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      bottom.value = MediaQueryData.fromView(WidgetsBinding.instance.platformDispatcher.views.first)
          .viewInsets
          .bottom;
    });
  }
}

class GroupConfirmPage extends GetView<GroupConfirmController> {
  const GroupConfirmPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: const Text('确认订单'),
      ),
      body: SingleChildScrollView(
        controller: controller.scrollController,
        child: Column(
          children: [
            Container(
              height: 80,
              padding: EdgeInsets.only(left: 15.w, right: 15.w, top: 15.h),
              decoration: const BoxDecoration(color: Colors.white),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      '张三',
                      style: StylesUtils.textStyle(
                          color: ColorsUtils.rgba(0, 0, 0, 0.847058823529412)),
                    ),
                  ),
                  Expanded(
                      child: Container(
                    padding: EdgeInsets.only(left: 20.w),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '13837829825',
                            style: StylesUtils.textStyle(
                                color: ColorsUtils.rgba(0, 0, 0, 0.847058823529412)),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 12.h),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '北京市朝阳区望京方恒国际中心C座',
                            style: StylesUtils.textStyle(
                                color: ColorsUtils.rgba(0, 0, 0, 0.847058823529412)),
                          ),
                        )
                      ],
                    ),
                  )),
                  IconButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          alignment: Alignment.topCenter,
                          minimumSize: MaterialStateProperty.resolveWith(
                              (states) => const Size(25, double.infinity))),
                      icon: const Icon(Icons.arrow_forward_ios,
                          size: 20, color: Colors.black, weight: 600)),
                ],
              ),
            ),
            Container(
              height: 40,
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.only(left: 20.w),
              child: Wrap(
                spacing: 20.w,
                children: [
                  SvgUtils.assetName('u8146', width: 20.w, height: 19.h),
                  Text(
                    '恒威',
                    style: StylesUtils.textStyle(
                        fontSize: StylesUtils.fontSize16,
                        color: ColorsUtils.rgba(0, 0, 0, 0.847058823529412)),
                  )
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)))),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Container(
                          padding: EdgeInsets.only(left: 5.w),
                          alignment: Alignment.center,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(5.r),
                            child: CachedNetworkImage(
                              imageUrl:
                                  'https://img30.360buyimg.com/popWareDetail/jfs/t1/22185/38/20093/256788/63563bfcE514cdfba/6bf67b45efa82713.jpg',
                              width: 85.w,
                              height: 87.h,
                              fit: BoxFit.fill,
                            ),
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: EdgeInsets.only(left: 20.w),
                          alignment: Alignment.topLeft,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Container(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  '恒威第五代强力燃油宝积碳清洁剂50ml x 5 瓶',
                                  textAlign: TextAlign.center,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13,
                                      lineHeight: 1.3.h),
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(top: 10.h),
                                alignment: Alignment.centerLeft,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Wrap(
                                      spacing: 10.w,
                                      crossAxisAlignment: WrapCrossAlignment.center,
                                      alignment: WrapAlignment.start,
                                      children: [
                                        Text(
                                          '￥255',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.colorE419),
                                        ),
                                        LayoutBuilder(builder: (c, BoxConstraints constraints) {
                                          var width = ToolsUtils.calculateTextHeight(c, '2人团',
                                              FontWeight.normal, StylesUtils.fontSize12, 150, 1);
                                          return Container(
                                            constraints: BoxConstraints.tightFor(
                                                width: width + 20, height: 23),
                                            decoration: BoxDecoration(
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF26f),
                                                borderRadius: BorderRadius.circular(4)),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '2人团',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize12),
                                            ),
                                          );
                                        }),
                                      ],
                                    ),
                                    Text(
                                      'x 1',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.647058823529412)),
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 15.h),
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)))),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: EdgeInsets.only(bottom: 15.h),
                          child: Text(
                            '优惠券',
                            style: StylesUtils.textStyle(
                                color: ColorsUtils.rgba(0, 0, 0, 0.847058823529412),
                                fontWeight: FontWeight.w700),
                          ),
                        ),
                        Center(
                            child: ListBody(
                          children: [
                            Container(
                              constraints: const BoxConstraints.expand(width: 310, height: 100),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Material(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                                    shape: _CouponShapeBorder(),
                                    child: Container(
                                      constraints:
                                          const BoxConstraints.expand(width: 103, height: 100),
                                      child: Column(
                                        children: [
                                          Container(
                                            padding: EdgeInsets.only(top: 15.h, bottom: 15.h),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '￥20',
                                              style: StylesUtils.customTextStyle(
                                                  fontWeight: FontWeight.w700, fontSize: 28.sp),
                                            ),
                                          ),
                                          Container(
                                            alignment: Alignment.center,
                                            child: Text(
                                              '满200元可用',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize13,
                                                  color: ColorsUtils.colorF2f2),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                      child: Container(
                                    padding: EdgeInsets.only(left: 10.w),
                                    decoration: BoxDecoration(
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorF2f2)),
                                    child: Stack(
                                      children: [
                                        Column(
                                          children: [
                                            Container(
                                              padding: EdgeInsets.only(top: 15.h, bottom: 25.h),
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '全品类通用',
                                                style: StylesUtils.customTextStyle(
                                                    color: ColorsUtils.color6666),
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '2018-11-03至2018-11-20',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: StylesUtils.fontSize13,
                                                    color: ColorsUtils.color9999),
                                              ),
                                            )
                                          ],
                                        ),
                                        Positioned(
                                          top: 0,
                                          right: 0,
                                          width: 60,
                                          height: 60,
                                          child: ClipPath(
                                            clipper: _MyCustomClipper(),
                                            child: Container(
                                                alignment: Alignment.center,
                                                constraints: const BoxConstraints.expand(
                                                    width: 60, height: 60),
                                                decoration: BoxDecoration(
                                                    color: ColorsUtils.parseColorFromHexString(
                                                        ColorsUtils.colorF95e)),
                                                child: Transform.rotate(
                                                  // 45度
                                                  angle: pi / 4,
                                                  child: Container(
                                                    alignment: Alignment.topCenter,
                                                    constraints: const BoxConstraints.expand(
                                                        width: 60, height: 35),
                                                    child: Text(
                                                      '满减券',
                                                      style: StylesUtils.customTextStyle(
                                                          fontSize: StylesUtils.fontSize13),
                                                    ),
                                                  ),
                                                )),
                                          ),
                                        )
                                      ],
                                    ),
                                  ))
                                ],
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 15.h),
                              constraints: const BoxConstraints.expand(width: 310, height: 100),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Material(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                                    shape: _CouponShapeBorder(),
                                    child: Container(
                                      constraints:
                                          const BoxConstraints.expand(width: 103, height: 100),
                                      child: Column(
                                        children: [
                                          Container(
                                            padding: EdgeInsets.only(top: 15.h, bottom: 15.h),
                                            alignment: Alignment.center,
                                            child: Text(
                                              '￥10',
                                              style: StylesUtils.customTextStyle(
                                                  fontWeight: FontWeight.w700, fontSize: 28.sp),
                                            ),
                                          ),
                                          Container(
                                            alignment: Alignment.center,
                                            child: Text(
                                              '满200元可用',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize13,
                                                  color: ColorsUtils.colorF2f2),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                      child: Container(
                                    padding: EdgeInsets.only(left: 10.w),
                                    decoration: BoxDecoration(
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorF2f2)),
                                    child: Stack(
                                      children: [
                                        Column(
                                          children: [
                                            Container(
                                              padding: EdgeInsets.only(top: 15.h, bottom: 25.h),
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '全品类通用',
                                                style: StylesUtils.customTextStyle(
                                                    color: ColorsUtils.color6666),
                                              ),
                                            ),
                                            Container(
                                              alignment: Alignment.centerLeft,
                                              child: Text(
                                                '2018-11-03至2018-11-20',
                                                style: StylesUtils.customTextStyle(
                                                    fontSize: StylesUtils.fontSize13,
                                                    color: ColorsUtils.color9999),
                                              ),
                                            )
                                          ],
                                        ),
                                        Positioned(
                                          top: 0,
                                          right: 0,
                                          width: 60,
                                          height: 60,
                                          child: ClipPath(
                                            clipper: _MyCustomClipper(),
                                            child: Container(
                                                alignment: Alignment.center,
                                                constraints: const BoxConstraints.expand(
                                                    width: 60, height: 60),
                                                decoration: BoxDecoration(
                                                    color: ColorsUtils.parseColorFromHexString(
                                                        ColorsUtils.colorF95e)),
                                                child: Transform.rotate(
                                                  // 45度
                                                  angle: pi / 4,
                                                  child: Container(
                                                    alignment: Alignment.topCenter,
                                                    constraints: const BoxConstraints.expand(
                                                        width: 60, height: 35),
                                                    child: Text(
                                                      '满减券',
                                                      style: StylesUtils.customTextStyle(
                                                          fontSize: StylesUtils.fontSize13),
                                                    ),
                                                  ),
                                                )),
                                          ),
                                        )
                                      ],
                                    ),
                                  ))
                                ],
                              ),
                            ),
                          ],
                        )),
                        SizedBox(
                          height: 10.h,
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30.h,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '商品合计：',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Text(
                          '￥255',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30.h,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '优惠金额：',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Text(
                          '-￥25',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 30.h,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '商品运费：',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Text(
                          '+￥0',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: 10.h,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)))),
                  ),
                  SizedBox(
                    height: 35.h,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '留言：',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                        ),
                        Expanded(
                            child: Container(
                          padding: EdgeInsets.only(left: 10.w),
                          alignment: Alignment.centerLeft,
                          child: TextField(
                            cursorWidth: 2.0,
                            cursorRadius: const Radius.circular(2),
                            cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                            style: StylesUtils.customTextStyle(
                                fontSize: 15.sp, color: ColorsUtils.color3333),
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              focusedBorder: InputBorder.none,
                              hintText: '请输入留言信息',
                              contentPadding: EdgeInsets.symmetric(vertical: 12.h),
                              isCollapsed: true,
                              isDense: true,
                              filled: true,
                              fillColor: ColorsUtils.rgba(255, 255, 255, 0),
                              hintStyle: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999,
                              ),
                            ),
                            onChanged: (String keyword) {},
                          ),
                        ))
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Obx(() => AnimatedPadding(
              padding: EdgeInsets.only(bottom: controller.bottom.value),
              duration: const Duration(milliseconds: 300),
              onEnd: controller.gotoBottom,
              child: Container(
                height: 40.h,
                decoration: const BoxDecoration(color: Colors.white),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                        child: Center(
                      child: RichText(
                        text: TextSpan(children: [
                          TextSpan(
                              text: '合计：',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color3333)),
                          TextSpan(
                              text: '￥230.00',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.colorE419))
                        ]),
                      ),
                    )),
                    Container(
                      width: 140.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                      child: TextButton(
                          onPressed: () {},
                          child: Text(
                            '提交订单',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize16),
                          )),
                    )
                  ],
                ),
              ),
            )),
      ),
    );
  }
}

class _CouponShapeBorder extends ShapeBorder {
  @override
  // TODO: implement dimensions
  EdgeInsetsGeometry get dimensions => throw UnimplementedError();

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    // TODO: implement getInnerPath
    throw UnimplementedError();
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    var path = Path();
    path.addRect(rect);
    // path.addArc(Rect.fromCircle(center: const Offset(0, 15), radius: 5), pi * 3 / 2, pi);
    _formHoldLeft(rect, path);
    path.fillType = PathFillType.evenOdd;
    return path;
  }

  void _formHoldLeft(Rect rect, Path path) {
    var len = 15.0;
    while (len < rect.height) {
      path.addArc(Rect.fromCircle(center: Offset(0, len), radius: 5), pi * 3 / 2, pi);
      len += 15.0;
    }
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    // TODO: implement paint
  }

  @override
  ShapeBorder scale(double t) {
    // TODO: implement scale
    throw UnimplementedError();
  }
}

class _MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(30, 0);
    path.lineTo(size.width, size.height - 30);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return this != oldClipper;
  }
}
